<template>
  <div class="bigBox">
    <div class="back"><van-icon name="cross" @click="Back" size="20" /></div>
    <h2>确认订单</h2>
    <div class="box">
      <div class="list">
        <div class="left"><van-icon name="location-o" /></div>
        <div class="flex">
          <div>
            <h3>张三 &nbsp;<span>13000000000</span></h3>
            <span>贵州省贵阳市云岩区延安东路物资大厦9楼千锋校区</span>
          </div>
          <span class="right">
            <router-link :to="{ name: 'location' }">
              <van-icon name="arrow" size="28" />
            </router-link>
          </span>
        </div>
      </div>
      <div class="list">
        <div class="left"><van-icon name="shopping-cart-o" /></div>
        <div class="flex">
          <div>
            <h3>平板电脑</h3>
            <span>黑色 x1</span>
          </div>
          <span class="right">
            <RouterLink to="/detailPage">
              <van-icon name="arrow" size="28" />
            </RouterLink>
          </span>
        </div>
      </div>
      <div class="list">
        <div class="left"><van-icon name="gold-coin-o" /></div>
        <div class="flex">
          <div>
            <h3 class="mony">实付 :&nbsp;<span>1299.99</span>元</h3>
            <span>快递运费 :&nbsp;0.00元</span>
          </div>
        </div>
      </div>
      <van-button
        round
        type="primary"
        class="bottom-button"
        color="rgb(255,60,80)"
        @click="show = true"
      >
        选择支付方式
        <van-overlay :show="show">
          <div class="wrapper" @click.stop>
            <div class="block">
              <p class="payTitle">
                <span
                  ><van-icon name="arrow-left" size="18" @click="changeShow"
                /></span>
                <span>付款方式</span>
              </p>
              <div class="payType">
                <div @click="changeImg2">
                  <img :src="getImageUrl(ImgSrc.blueImg1, 'png')" alt="" />
                  <span>支付宝</span>
                  <img :src="getImageUrl(ImgSrc.greenImg2, 'png')" alt="" />
                </div>
                <div @click="changeImg1">
                  <img :src="getImageUrl(ImgSrc.grayImg1, 'png')" alt="" />
                  <span>微信</span>
                  <img :src="getImageUrl(ImgSrc.grayImg2, 'png')" alt="" />
                </div>
              </div>
              <router-link to="/nowPay">
                <van-button
                  round
                  type="primary"
                  class="bottom-button2"
                  color="rgb(255,60,80)"
                  @click="toast"
                  >立即支付</van-button
                >
              </router-link>
            </div>
          </div>
        </van-overlay>
      </van-button>
    </div>
  </div>
</template>
1111
<script setup>
import { getImageUrl } from "@/uilts/index";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";

// 地址的选择
import { useAddrStore } from "@/stores/addr.js";
const addrS = useAddrStore();

onMounted(() => {
  // console.log(addrS.addrList);
});

const router = useRouter();
const show = ref(false);
const ImgSrc = reactive({
  grayImg1: "u494",
  blueImg1: "u487",
  grayImg2: "u492",
  greenImg2: "u489",
});
//切换支付方式，改变对应方式的图片颜色
function changeImg1() {
  ImgSrc.blueImg1 = "u490";
  ImgSrc.grayImg1 = "u497";
  ImgSrc.grayImg2 = "u489";
  ImgSrc.greenImg2 = "u492";
}
function changeImg2() {
  ImgSrc.blueImg1 = "u487";
  ImgSrc.grayImg1 = "u494";
  ImgSrc.grayImg2 = "u492";
  ImgSrc.greenImg2 = "u489";
}
//改变show的值，控制遮罩层的显示与隐藏
function changeShow() {
  show.value = false;
}
// 点击立即支付按钮的提示信息
function toast() {
  showToast("支付成功");
}
//返回上一页
function Back() {
  router.back();
}
</script>

<style lang="less" scoped>
a {
  color: black;
}
.bigBox {
  overflow: hidden;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.payTitle {
  width: 100%;
  display: flex;
  margin-top: 3.333vw;
  margin-left: 3.667vw;
  font-weight: bold;
  span {
    margin-right: 3.333vw;
  }
}
.back {
  width: 8.5vw;
  height: 8.5vw;
  margin-left: 6.467vw;
  margin-top: 6.133vw;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 4.533vw;
}
.payType {
  padding: 5.333vw 3.667vw;
  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5.333vw;
    border-bottom: 1px solid gray;
    padding-bottom: 3.333vw;
    span {
      margin-left: -45.333vw;
      font-size: 3.6vw;
    }
  }
}
.block {
  position: relative;
  width: 86vw;
  height: 57vw;
  color: black;
  background-color: #fff;
}
h2 {
  line-height: 1;
  // font-size: 4.533vw;
  font-weight: 600;
  margin-bottom: 5.267vw;
  margin-top: 5.333vw;
  margin-left: 7.733vw;
}

.bottom-button {
  position: absolute;
  bottom: 14vw;
  left: 5vw;
  width: 90%;
  height: 10.333vw;
  border-radius: 2vw;
}
.bottom-button2 {
  position: absolute;
  bottom: 3.8vw;
  left: 2vw;
  width: 95%;
  height: 10.333vw;
  border-radius: 2vw;
}
.box {
  padding: 0 7.733vw;
  .list {
    width: 100%;
    height: 22.2vw;
    border-bottom: 0.267vw solid #ccc;
    div {
      float: left;
    }
    .left {
      width: 10vw;
      font-size: 6vw;
      height: 22.2vw;
      line-height: 22.2vw;
    }
    .flex {
      width: calc(100% - 12vw);
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 2.667vw;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 1vw;
      }
      .mony {
        color: #ff3c50;
        font-weight: 900;
      }
      span {
        font-size: 2.667vw;
        line-height: 1;
      }
      .copy {
        width: 11vw;
        height: 5vw;
        background-color: #ff3c50;
        border-radius: 1vw;
        line-height: 5vw;
        text-align: center;
        color: #fff;
        font-size: 2vw;
        margin-top: -7.333vw;
      }
      .right {
        font-weight: bold;
        color: #333;
        //   font-size: 6.333vw;
      }
    }
  }
}
</style>
